<%--
  Created by IntelliJ IDEA.
  User: 28633
  Date: 2020/8/27
  Time: 15:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>

    .demo ul li{
        display: inline-block;
    }
    .demo{
        align-content: center;
        padding-left: 35%;
    }


    .pagination__number {
        line-height: 1;
        text-decoration: none;
        display: inline-block;
        color: var(--paginationPageTextColor, inherit);
    }

    a {
        text-decoration: none;
        color: #0094d9;
    }
    .pagination_type1 .pagination__number {
        padding: 7px 10px;
    }
    .pagination__number {
        line-height: 1;
        text-decoration: none;
        display: inline-block;
        color: var(--paginationPageTextColor, inherit);
    }

    a {
        text-decoration: none;
        color: #0094d9;
    }
    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    user agent stylesheet
    a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
    }

    .pagination_type1 .pagination__number {
        padding: 7px 10px;
    }
    .pagination__number {
        line-height: 1;
        text-decoration: none;
        display: inline-block;
        color: var(--paginationPageTextColor, inherit);
    }
    a {
        text-decoration: none;
        color: #0094d9;
    }
    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    user agent stylesheet
    a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
    }
    user agent stylesheet
    li {
        text-align: -webkit-match-parent;
    }
    .pagination_type1 {
        --paginationPageActiveBgColor: #4557bb;
        --paginationPageTextColor: #0094d9;
        --paginationPageActiveTextColor: #fff;
    }
    .pagination {
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        list-style: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    user agent stylesheet
    ul {
        list-style-type: disc;
    }
</style>
<div class="demo">
    <ul class="pagination pagination_type1" align="center">
        <c:if var="isFirst" test="${pm.pn <= 1}">
            <li class="prev disabled">
                <a href="javascript:;" class="pagination__number">←
                    <span class="pagination__control pagination__control_prev">prev</span>
                </a>
            </li>
        </c:if>
        <c:if test="${!isFirst}">
            <li class="prev">
                <a href="${basePath}commoditylt?method=queryCommoditys&pn=${pm.pn-1}" class="pagination__number">←
                    <span class="pagination__control pagination__control_prev">prev</span>
                </a>
                </a>
            </li>
        </c:if>

        <c:forEach var="i" begin="1" end="${pm.pages}" step="1">
            <c:if var="isPn" test="${pm.pn==i}">
                <li class="pagination__item"><span class="pagination__number pagination__number_active">${i}</span></li>
            </c:if>
            <c:if test="${!isPn}">
                <li class="pagination__item"><a href="${basePath}commoditylt?method=queryCommoditys&pn=${i}" class="pagination__number">${i}</a></li>
            </c:if>
        </c:forEach>

        <c:if var="isLast" test="${pm.pn >= pm.pages}">
            <li class="next">
                <a href="javascript:;" class="pagination__number">
                    <span class="pagination__control pagination__control_next">next</span>→
                </a>
            </li>
        </c:if>
        <c:if test="${!isLast}">
            <li class="next">
                <a href="${basePath}commoditylt?method=queryCommoditys&pn=${pm.pn+1}" class="pagination__number">
                    <span class="pagination__control pagination__control_next">next</span>→
                </a>
            </li>
        </c:if>
    </ul>
</div>